<template>
	<view>


		<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
					v-if="item.type=='video'"></video>
			</swiper-item>
		</swiper>
		<view class="detail_title">
			<view class="t1"></view>
			<view class="t2"></view>
			<view class="t0">项目描述</view>
			<view class="t2"></view>
			<view class="t1"></view>
		</view>
		<view class="margin-left">
			{{data.project_summary}}
			<view class="margin-top">
				项目名称：{{data.project_name}}<br />
				项目地点：{{data.location}}<br />
				项目需求：{{data.project_demand}}<br />
				发布时长：{{data.publish_duration}}<br />
			</view>
		</view>

		<view class="cu-bar bg-white tabbar border shop foot">
			<button class="action" open-type="contact">
				<view class="cuIcon-service text-green">
					<view class="cu-tag badge"></view>
				</view> 客服
			</button>

			<view class="btn-group" style="margin-right: 10rpx;">
				<button class="cu-btn round shadow-blur" style="width: 350rpx; background-color: #994278;color: white;"
					@click="entry()">立即报名</button>
			</view>
		</view>



	</view>

</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}],
				id: null,
				data: {}
			}
		},
		onLoad(opt) {
			var that = this
			that.id = opt.id
			that.getdata()
		},
		methods: {
			getdata(loadmore) {
				var that = this
				app.get('ApiProjectPublish/projectdetail', {
					id: that.id,
				}, function(res) {
					that.data = res.data
					}
				);
			},
			entry() {
				uni.navigateTo({
					url: '/activity/project/entry?id=' + this.data.id + '&project_img=' + this.data.project_img +
						'&project_name=' + this.data.project_name
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}


	.header .price_share {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between
	}

	.header .price_share .price {
		display: flex;
		align-items: flex-end
	}

	.header .price_share .price .f1 {
		font-size: 50rpx;
		color: #51B539;
		font-weight: bold
	}

	.header .price_share .price .f2 {
		font-size: 26rpx;
		color: #C2C2C2;
		text-decoration: line-through;
		margin-left: 30rpx;
		padding-bottom: 5px
	}

	.header .price_share .share {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-width: 60rpx;
	}

	.header .price_share .share .img {
		width: 32rpx;
		height: 32rpx;
		margin-bottom: 2px
	}

	.header .price_share .share .txt {
		color: #333333;
		font-size: 20rpx
	}

	.header .title {
		color: #000000;
		font-size: 32rpx;
		line-height: 42rpx;
		font-weight: bold;
	}

	.header .price_share .title {
		display: flex;
		align-items: flex-end;
	}


	.detail_title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 60rpx;
		margin-bottom: 30rpx
	}

	.detail_title .t0 {
		font-size: 28rpx;
		font-weight: bold;
		color: #222222;
		margin: 0 20rpx
	}

	.detail_title .t1 {
		width: 12rpx;
		height: 12rpx;
		background: rgba(253, 74, 70, 0.2);
		transform: rotate(45deg);
		margin: 0 4rpx;
		margin-top: 6rpx
	}

	.detail_title .t2 {
		width: 18rpx;
		height: 18rpx;
		background: rgba(253, 74, 70, 0.4);
		transform: rotate(45deg);
		margin: 0 4rpx
	}


	.bottombar {
		width: 94%;
		position: fixed;
		bottom: 0px;
		left: 0px;
		background: #fff;
		display: flex;
		height: 100rpx;
		padding: 0 4% 0 2%;
		align-items: center;
		box-sizing: content-box
	}

	.bottombar .f1 {
		flex: 1;
		display: flex;
		align-items: center;
		margin-right: 30rpx
	}

	.bottombar .f1 .item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80rpx;
		position: relative
	}

	.bottombar .f1 .item .img {
		width: 44rpx;
		height: 44rpx
	}

	.bottombar .f1 .item .t1 {
		font-size: 18rpx;
		color: #222222;
		height: 30rpx;
		line-height: 30rpx;
		margin-top: 6rpx
	}

	.bottombar .op {
		width: 60%;
		border-radius: 36rpx;
		overflow: hidden;
		display: flex;
	}

	.bottombar .tocart {
		flex: 1;
		height: 72rpx;
		line-height: 72rpx;
		color: #fff;
		border-radius: 0px;
		border: none;
		font-size: 28rpx;
		font-weight: bold
	}

	.bottombar .tobuy {
		flex: 1;
		height: 72rpx;
		line-height: 72rpx;
		color: #fff;
		border-radius: 0px;
		border: none;
		font-size: 28rpx;
		font-weight: bold
	}

	.bottombar .cartnum {
		position: absolute;
		right: 4rpx;
		top: -4rpx;
		color: #fff;
		border-radius: 50%;
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		text-align: center;
		font-size: 22rpx;
	}

	.bottombar .op2 {
		width: 60%;
		overflow: hidden;
		display: flex;
	}

	.bottombar .tocart2 {
		flex: 1;
		height: 80rpx;
		border-radius: 10rpx;
		color: #fff;
		background: #fa938a;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
	}

	.bottombar .tobuy2 {
		flex: 1;
		height: 80rpx;
		border-radius: 10rpx;
		color: #fff;
		background: #df2e24;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center
	}
</style>